<template>
  <div class="info">
    <div class="rightContent">
      <div class="Cheader">
        <span class="title">&nbsp;实名认证</span>
      </div>
      <div class="headerInfo">
        查看、完善账户信息，进行账户认证！
      </div>
      <div class="content">
        <div class="headerInfoTitle">
          个人实名认证
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 63px">真实姓名：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="请填写身份证上的姓名" style="width: 530px"></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 63px">身份证号：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="请填写18位的二代身份证号码" style="width: 530px"></el-input>
            </span>
        </div>
        <div class="userUpload">
          <div class="leftTitle">上传证件：</div>
          <div class="rightContent">
            <div class="uploadImg">
            <img :src="userIdZM"/>
              <p class="topImg" >请上传身份证正面图片</p>
            </div>
            <div class="uploadImg1">
            <img :src="userIdFM"/>
              <p class="topImg" >请上传身份证反面图片</p>
            </div>
          </div>
          <div class="footerDec">支持的图片格式包括JPG、JPEG和PNG，上传的图片需要清晰完整。</div>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 63px">通讯地址：</span>
          <span class="rightC">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 58px"></span>
          <span class="rightC" style="padding-left: 99px">
              <el-input class="handInput" placeholder="填写详细地址" style="width: 530px"></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftTS" style="padding-left: 193px">该审核为人工审核，预计在1~2个工作日内完成。</span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 145px"></span>
          <span class="rightC">
            <el-button type="primary" >提交审核</el-button>

            </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import userIdZM from '@/assets/userMessage/userIdZM.png'
  import userIdFM from '@/assets/userMessage/userIdFM.png'
  export default {
    data() {
      return {
        userIdZM,
        userIdFM,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .info{
    .configTop{
      width: 100%;
      height: 40px;
      .configTitle{
        font-size: 16px;
        color: #676A70;
        padding-left: 5px;
        border-left: 5px solid #25B6C7;
        height: 16px;
      }
    }
    .rightContent{
      width: 90%;
      height: 900px;
      margin-left: 200px;
      /*float: right;*/
      .Cheader {
        width: 100%;
        height: 38px;
        line-height: 38px;
        .title {
          border-left: 5px solid #25B6C7;
        }
      }
      .headerInfo{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #E6EFEF;
        font-size:12px;
        font-family:MicrosoftYaHeiLight;
        font-weight:300;
        color:rgba(102,102,102,1);
        padding-left: 10px;
      }
      .content{
        width: 900px;
        height: 600px;
        .headerInfoTitle{
          width: 300px;
          height: 40px;
          line-height: 40px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(50,56,66,1);
        }
        .userUpload{
          width: 700px;
          height: 200px;
          margin-top: 10px;
          margin-bottom: 10px;
          .leftTitle{
            width:142px;
            height: 160px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(50,56,66,1);
            text-align: right;
            margin-left: 37px;
            float: left;
          }
          .rightContent{
            width: 600px;
            height: 160px;
            margin-bottom: 20px;
            .uploadImg{
              width: 256px;
              height: 160px;
              border: 1px dashed #E6EFEF;
              padding: 10px;
              text-align: center;
              padding-top: 20px;
              border-radius: 5px;
              float: left;
              .topImg{
                font-size:12px;
                font-family:MicrosoftYaHeiLight;
                font-weight:300;
                color:rgba(170,170,170,1);
              }
            }
            .uploadImg1{
              width: 256px;
              height: 160px;
              border: 1px dashed #E6EFEF;
              padding: 10px;
              text-align: center;
              padding-top: 20px;
              border-radius: 5px;
              float: right;
              margin-right: 75px;
              .topImg{
                font-size:12px;
                font-family:MicrosoftYaHeiLight;
                font-weight:300;
                color:rgba(170,170,170,1);
              }
            }
           }
          .footerDec{
            width: 500px;
            height: 30px;
            line-height: 10px;
            font-size:12px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            margin-left: 200px;
            color:rgba(105,114,126,1);
          }

        }
        .userMessage{
          width: 800px;
          height: 40px;
          .leftT{
            width:300px;
            height: 40px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            margin-left: 100px;
            color:rgba(50,56,66,1);
            text-align: right;
          }
          .leftTS {
            width: 300px;
            height: 40px;
            font-size: 12px;
            font-family: MicrosoftYaHeiLight;
            font-weight: 300;
            color: rgba(105, 114, 126, 1);
            text-align: right;
          }
          .leftT1{
            width:300px;
            height: 40px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(50,56,66,1);
            text-align: right;
            margin-left: 37px;
          }
          .rightC{
            width:600px;
            height: 40px;
            padding-left: 10px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(50,56,66,1);
            text-align: right;
          }

          /deep/ .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
          /deep/ .el-button--primary {
            height: 30px;
            font-size: 14px;
            padding: 6px 16px;
            background: #25B6C7;
            border-color: #25B6C7;
            margin-top: 10px;
          }
        }
      }
    }
  }

</style>
